<template>
  <div class="search-template">
    <sn-row-has-two-col
        :left="1" :right="23">
      <sn-text
          :text="description"
          slot="one-col" style="margin-top: 10px"/>
      <div slot="two-col">
        <el-button
            @click="all"
            type="danger"
            :class="{'button-active': allActive,'button-not-active': !allActive}"
            round class="all-button">全部
        </el-button>
        <el-button
            @click="nowButtonActive(item)"
            v-for="item in buttons"
            round type="danger"
            :class="{'button-active': item.isActive,'button-not-active': !item.isActive}"
            class="item">
          {{ item.name }}
        </el-button>
      </div>
    </sn-row-has-two-col>
  </div>
</template>

<script>
export default {
  name: "SearchTemplate",
  data() {
    return {
      allActive: true
    }
  },
  props: {
    description: {
      type: String,
      default: '品牌:'
    },
    buttons: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {},
  methods: {
    //查询所有
    all() {
      this.allActive = true
      for (let item of this.buttons) {
        item.isActive = false
      }
      this.$emit("toSearchAll", this.description)
    },
    nowButtonActive(item) {
      let {id, name} = item
      this.allActive = false
      for (let item of this.buttons) {
        if (item.id === id) {
          item.isActive = true
        } else {
          item.isActive = false
        }
      }
      let condition = {
        id: id,
        name: name,
        description: this.description
      }
      this.$emit("toSearchSingle", condition)
    }
  },
}
</script>

<style scoped>
.item {
  margin-right: 5px;
}

.all-button {
  margin-right: 5px;
}

.button-active {
  background-color: #F56C6C;
  color: #ffffff;
}

.button-not-active {
  background-color: #ffffff;
  color: #333;
  border: none;
  outline: transparent;
}

.search-template {
  margin-top: 20px;
}
</style>